<%@taglib uri="/struts-tags" prefix="s"%>
<link type="text/css" href="${pageContext.request.contextPath}/static/gallery/white.css" rel="stylesheet" />
<script type="text/javascript" src="${pageContext.request.contextPath}/static/gallery/mbGallery.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/gallery/jquery.exif.js"></script>
<style type="text/css">
	div.thumb {
		margin: 3px;
		border: 1px;
		height: auto;
		float: left;
		text-align: center;
	}
	.thumb img{
		display: inline;
		margin: 5px;
		border: 1px solid #A0ACC0;
	}
	.thumb a:hover img {border: 1px solid black;}
	.photocattitle {text-align: center; font-weight: bold;}
	.phototitle {
		text-align: center;
		color:white;
		font-weight: normal;
		width: 120px;
		margin: 0 3px 3px 3px;
	}
	ul#icons {margin: 0; padding: 0;}
	ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
	ul#icons span.ui-icon {float: left; margin: 0 4px;}
</style>

<s:if test="#session.user.role == 'admin'">
	<a href="<s:url action="CreateAlbum"/>">Add Album</a>
</s:if>

<s:iterator value="albums" status="album" >
	<div class="thumb">
		<div class="phototitle"><s:property value="title"/></div>
		<a href="javascript:$('#<s:property value="name"/>').mbGallery({maskBgnd:'#ccc', overlayOpacity:.9,startFrom: 5});">
			<img alt="" src="<s:property value="thumbnail"/>"/>
		</a>
		<s:if test="#session.user.role == 'admin'">
			<div>
				<ul id="icons" class="ui-widget ui-helper-clearfix">
					<li class="ui-state-default ui-corner-all" title="Upload Photo for <s:property value="name"/>">
						<a href="<s:url action="ViewAlbum"><s:param name="albumId" value="id"/></s:url>"><span class="ui-icon ui-icon-image"></span></a>
					</li>
					<li class="ui-state-default ui-corner-all" title="Delete <s:property value="name"/>">
						<a href="<s:url action="DeleteAlbum"><s:param name="albumId" value="id"/></s:url>"><span class="ui-icon ui-icon-trash"></span></a>
					</li>
				</ul>
			</div>
		</s:if>
	</div>
</s:iterator> 

<s:iterator value="albums" status="album" >
	<div id="<s:property value="name"/>" style="display:none;">
		<div class="albumDesc"><s:property value="title"/></div>
		<s:iterator value="photos" status="photo">
			<a class="imgThumb" href="<s:property value="thumbnail"/>"></a>
			<a class="imgFull" href="<s:property value="link"/>"></a>
			<div class="imgDesc">Title: <s:property value="title"/> <br> Description: <s:property value="description"/></div>
	  	</s:iterator>
	</div>
</s:iterator>